Vue.component('company-area-cascader', {
  template: `
    <el-cascader ref="cascader" v-model="value" :options="options" :props="{ value: 'id', label: 'name' }" @change="handleChange"></el-cascader>
  `,
  props: {
    form: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      value: [],
      options: []
    }
  },
  watch: {
    'form': {
      handler(newVal) {
        if (newVal.province_registered && newVal.city_registered) {
          let arr = []
          arr.push(this.form.province_registered, this.form.city_registered)
          this.value = arr
        } else {
          this.value = []
        }
      },
      deep: true
    }
  },
  mounted() {
    if (window.parent.dataId) {
      let arr = []
      arr.push(this.form.province_registered, this.form.city_registered)
      this.value = arr
    } else {
      this.form.province_registered = undefined
      this.form.city_registered = undefined
    }
    axios({
      url: window.parent.baseUrl + '/area/sysArea/buildTree',
      headers: {
        'Content-Type':'application/json;charset=utf-8',
        'Authorization': window.parent.token
      },
      method: 'get',
      params: { parentId: '1' }
    }).then(res => {
      let _res = res.data
      if (_res.code === 200) {
        this.options = _res.data
      }
    })
  },
  methods: {
    handleChange(value) {
      this.form.province_registered = value[0]
      this.form.city_registered = value[1]
    }
  }
})
